<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/personal.css'}"/>
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/dialogbutton.js'}"></script>
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/jquery.qrcode.js'}"></script>
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/qrcode.js'}"></script>
    <style>
        #rz::placeholder{
            color: #ff0000;
        }
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            background-color: white;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=88);
        }
        .am-share-title { background-color: #fff;
            color:#2d9cff;
            line-height: 0.9rem;
            font-size: 0.32rem;
            text-align: center;
            font-weight: bolder
        }
        #select {
            display: none;
            position: absolute;
            top: 25%;
            left: 6%;
            width: 80%;
            height: 48%;
            padding: 0.2rem;
            border: 0.09rem solid #0caffe;
            background-color: white;
            z-index: 1002;
            border-radius: 0.4rem;
        }
    </style>

    <title>个人资料</title>
</head>
<body  >

<header><a th:href="@{/wap/mine.html}"><span></span></a>个人资料</header>
<form action="">
<ul>
    <li class="mt20"><span class="f26 g9">头像</span><div id="preview"><img  id="img" th:src="${user.head}" alt="" style="width: 0.88rem;height: 0.88rem;"/><input type="file" id="file" name="file"  accept="image/*"  multiple="multiple"></div></li>
    <li onclick="window.location.href='updatenick.html'"><span class="f26 g9">昵称</span><input type="text" th:value="${user.name}" class="f26 g32" disabled/></li>
    <li id="sex"><span class="f26 g9">性别</span><input type="text" th:value="${user.sex==0}?'男':'女'" placeholder="请选择性别" class="f26 g32" disabled name="sex"/></li>
    <li class="mt20" onclick="window.location.href='phone.html'"><span class="f26 g9" >手机号</span><input type="text" th:value="${user.phone}" class="f26 g32" disabled/></li>
    <li  onclick="window.location.href='aliAccount.html'"><span class="f26 g9" >支付宝账号</span><input type="text" th:value="${user.aliAccount}" class="f26 g32" disabled/></li>
    <li  onclick="window.location.href='wechatAccount.html'"><span class="f26 g9" >微信账号</span><input type="text" th:value="${user.wechatAccount}" class="f26 g32" disabled/></li>
    <li  onclick="window.location.href='bankAccount.html'"><span class="f26 g9" >银行卡账号</span><input type="text" th:value="${user.bankAccount}" class="f26 g32" disabled/></li>
    <span th:if="${user.proxy==0}">
        <li class="mt20" onclick="shenren()"><span class="f26 g9">申请代理</span><input type="text" placeholder="申请" id="rz1" class="f26 g32" disabled/></li>
    </span>
    <span th:if="${user.proxy==1}">
        <li class="mt20" ><span class="f26 g9">邀请码</span><input type="text" th:value="${user.inviteCode}"  class="f26 g32" disabled/></li>
    </span>
    <span th:if="${user.proxy==1}">
        <li class="mt20" >
            <span class="f26 g9">邀请二维码</span>
            <a href="#" style="float:right;" id="sc" onclick="Qrcode()">生成二维码</a>
            <a href="#" style="float:right;display: none" id="ck" onclick="openTan()">查看</a>
        </li>
    </span>
    <li onclick="window.location.href='idIdentify.html'"><span class="f26 g9">实名认证</span><input type="text" th:placeholder="${user.identified==1}?'认证成功':'请先进行实名认证'" id="rz" class="f26 g32" disabled/></li>
    <li onclick="window.location.href='recover.html'"><span class="f26 g9">修改密码</span><input type="text"  class="f26 g32" disabled/></li>
</ul>
</form>

<button id="btn">退出登录</button>


<div class="am-share">
   <p class="share_btn">男</p>
   <p class="share_btn">女</p>
</div>
<div class="am-share1">
    <h3 class="am-share-title1 tc">是否退出登录？</h3>
    <div class="df jcsb aic"><button class="share_btn1 yes" onclick="quite()">是</button><button class="share_btn1">否</button></div>
</div>

<div id="fade" class="black_overlay"></div>
<div  id="select">
    <a href="javascript:void(0)" style="float: right" onclick="closeTan()"><i class="chaicon"><img th:src="@{${session.baseUrl}+'images/login/cha.jpg'}" style="width:0.4rem; height:0.4rem;"></i></a>
    <h3 class="am-share-title">邀请二维码</h3>
    <div id="qrcodeTable"></div>
</div>

<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

    function shenren() {
        var identified = /*[[${user.identified}]]*/
        if(identified==0){//未实名认证
            $('body').dailog({type:'danger',title:'提示',discription:'请先进行实名注册'});
            self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                window.location.href=basePath+"/wap/personal.html"
            },3000) //这里3000代表3秒
        }else{
            window.location.href= basePath+'/wap/shenli.html';
        }

    }


    /*** 更改头像*/
    var eleFile = document.querySelector('#file');
    eleFile.addEventListener('change', function() {
        var file = this.files[0];
        // 确认选择的文件是图片
        if(file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                // 图片base64化
                var newUrl = this.result;
                $('body').dailogbutton({type: 'success', title: '更改头像', discription: '确认更改？'},function(ret) {

                    if(ret.index===0){
                        $.ajax({
                            url:basePath+'/wap/memberUser/updateHeader',
                            type: "post",
                            dataType: "json",
                            data:JSON.stringify({
                                baseStr:newUrl
                            }),
                            contentType: 'application/json;charset=UTF-8',
                            //async: false,
                            success: function (data) {
                                document.getElementById("img").src=data.msg;
                            },
                            error:function (data) {

                            }

                        });

                    }else{
                        location.reload();
                    }


                })



            };
        }
    });



    $(function(){
    function toshare(){
        $(".am-share").css("display","block");
        if($(".sharebg").length>0){
            $(".sharebg").addClass("sharebg-active");
        }else{
            $("body").append('<div class="sharebg"></div>');
            $(".sharebg").addClass("sharebg-active");
        }
        document.documentElement.style.overflow='hidden';
        document.body.style.overflow='hidden';
        $(".sharebg-active,.share_btn").click(function(){
            if($(this).hasClass("share_btn")){
                var value=$(this).html();
                var sex;
                if(value=='男'){
                    sex=0;
                }else if(value=='女'){
                    sex=1;
                }
                $.ajax({
                    url:basePath+'/wap/memberUser/updateSex',
                    type: "get",
                    dataType: "json",
                    data:{
                        sex:sex
                    },
                    contentType: 'application/json;charset=UTF-8',
                    //async: false,
                    success: function (data) {
                        if (data.msg == "ok") {
                            location.reload();
                        }
                    },
                    error:function (data) {

                    }

                });

            }
            $(".am-share").css("display","none");
            setTimeout(function(){
                $(".sharebg-active").removeClass("sharebg-active");
                $(".sharebg").remove();
            },300);
            document.documentElement.style.overflow='auto';
            document.body.style.overflow='auto';
        })
    }
        $("#sex").click(function(e){
        toshare();
     });
        $("#btn").click(function(){
            var self=$(this);
            $(".am-share1").css("display","block");
            if($(".sharebg1").length>0){
                $(".sharebg1").addClass("sharebg-active1");
            }else{
                $("body").append('<div class="sharebg1"></div>');
                $(".sharebg1").addClass("sharebg-active1");
            }
            document.documentElement.style.overflow='hidden';
            document.body.style.overflow='hidden';
            $(".sharebg-active1,.share_btn1").click(function(){
                if($(this).hasClass("yes")){
                    self.parents("li").remove();
                }
                $(".am-share1").css("display","none");
                setTimeout(function(){
                    $(".sharebg-active1").removeClass("sharebg-active1");
                    $(".sharebg1").remove();
                },300);
                document.documentElement.style.overflow='auto';
                document.body.style.overflow='auto';
            })
        });
    });



    function quite() {
        $.ajax({
            url:basePath+'/memberUser/quite',
            type: "get",
            dataType: "json",
            data:null,
            contentType: 'application/json;charset=UTF-8',
            //async: false,
            success: function (data) {
                if(data.msg=="success"){
                    $('body').dailog({type:'danger',title:'退出',discription:'退出成功'});
                    self.setInterval(function(){
                        window.location.href= basePath+'/wap/index.html';
                    },2000)
                }
            },
            error:function (data) {

            }

        });

    }

    /**
     * 生成二维码
     */
    function Qrcode(){
        $("#qrcodeTable").html("");
        var url=basePath +"/wap/loginInit.do?invitedId="+ /*[[${session.memberId}]]*/;

        $("#qrcodeTable").qrcode({   //选择存放链接容器
            width: 300, //width height如果不写默认是 256 256
            height:300,
            text: url //将链接容器的内容赋值给text
        });
        document.getElementById("sc").style.display="none";
        document.getElementById("ck").style.display="inline";
    }

    function openTan() {
        document.getElementById("select").style.display="block";
        document.getElementById('fade').style.height= document.body.clientHeight+"px";
        document.getElementById('fade').style.display = 'block'
    }

    function closeTan() {
        document.getElementById('select').style.display = 'none';
        document.getElementById('fade').style.display = 'none'
    }


</script>
</body>
</html>
